select box의 높이와 배경색을 변경하는 방법
로빈아빠
본문
select box의 높이와 배경색을 변경하는 방법
select box에도 스타일을 적용할 수 있다는 사실을 알면 이 문제를 어떻게 풀어야 할지 쉽게 알 수 있을 것이다. <select> 태그 또는 <option> 태그 안에 style="background:#000000;color:#FFFFFF;font-size:8pt"와 같은 스타일 코드를 삽입해 주면 된다. select box의 높이도 결국 select box에 나타날 폰트 크기를 줄임으로써 줄일 수 있다.
이제 실제 예를 살펴 보도록 하자.
가장 기본적인 형태는 다음과 같다:
| <select > <option value="1">선택1</option> <option value="2">선택2</option> <option value="3">선택3</option> </select> |
| 선택1 선택2 선택3 |
select 태그 안에 스타일 코드를 적용한 예:
| <select style="background:#FDFF62; color:black; font-size:8pt"> <option value="1">선택1</option> <option value="2">선택2</option> <option value="3">선택3</option> </select> |
| 선택1 선택2 선택3 |
option 태그 안에 스타일 코드를 적용한 예:
| <select style="font-size:8pt> <option value="1" style="background:#FDFF62;color:navy; font-size:8pt">선택1</option> <option value="2" style="background:#FDFF62;color:navy; font-size:8pt">선택2</option> <option value="3" style="background:#FDFF62;color:navy; font-size:8pt">선택3</option> </select> |
| 선택1 선택2 선택3 |
option 태그 안에 다양한 배경색과 전경색을 적용한 예:
| <select style="font-size:8pt"> <option value="1" style="background:navy;color:white; font-size:8pt">선택1</option> <option value="2" style="background:yellow;color:black; font-size:8pt">선택2</option> <option value="3" style="background:red;color:white; font-size:8pt">선택3</option> <option value="4" style="background:navy;color:white; font-size:8pt">선택4</option> </select> |
| 선택1 선택2 선택3 선택4 |
폰트 사이즈를 크게 준 예:
| <select style="font-size:14pt> <option value="1" style="background:#FDFF62;color:navy; font-size:14pt">선택1</option> <option value="2" style="background:#FDFF62;color:navy; font-size:14pt">선택2</option> <option value="3" style="background:#FDFF62;color:navy; font-size:14pt">선택3</option> </select> |
| 선택1 선택2 선택3 |
폰트 종류를 변경한 예:
제공 : 코리아인터넷닷컴, 2001년 09월 14일
저자 : Daniel Joe
| <select style="font-family:바탕체; font-style:italic; font-size:10pt; color:navy; text-align:center; text-decoration:underline; background-color:rgb(239,239,239);"> <option value="1">선택1</option> <option value="2" style="background:red;color:white;">선택2</option> <option value="3" style="background:yellow;color:black;">선택3</option> </select> |
| 선택1 선택2 선택3 |
제공 : 코리아인터넷닷컴, 2001년 09월 14일
저자 : Daniel Joe
관련링크
- http://poolpiri.egloos.com/7021392 1237회 연결
댓글목록
등록된 댓글이 없습니다.